<template>
    <div>
        <el-form :model="baseMsg">
            <el-row>
                <el-col :span="9">
                    <el-form-item label="商品名称">
                        <el-input v-model="baseMsg.name" placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="margin-left: 10%;">
                    <el-form-item label="商品品牌">
                        <el-select v-model="baseMsg.brandId" placeholder="请选择商品品牌" ref="itemSelect">
                            <el-option 
                                v-for="(item, key) in brandData" 
                                :key="key" 
                                :label="brandData[key].name" 
                                :value="brandData[key].id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="margin-left: 10%;">
                    <el-form-item label="商品价格">
                        <el-input v-model="baseMsg.price" placeholder="请输入商品价格"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="商品图片">
                <el-upload 
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                    :limit="5"
                    :file-list="albumList"
                    :on-change="changeAlbum"
                    :on-remove="changeAlbum"
                    style="width: 780px; overflow: hidden; white-space:nowrap;">
                    
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品详情" class="description">
                <vue-editor 
                    v-model="baseMsg.description" 
                    placeholder="请点击【图片按钮】插入商品详情图" 
                    useCustomImageHandler 
                    @image-added="handleImageAdded"
                    :editorToolbar="customToolbar"></vue-editor>
            </el-form-item>
        </el-form>
        <el-button type="info" @click="pre()">上一步，填写商品分类</el-button>
        <el-button type="primary" @click="next()">下一步，设置商品属性</el-button>
    </div>
</template>

<script>
    import { get, post } from '@/plugins/axios.js'
    import { url } from '@/views/pms/product/api.js'
    export default {
        name: "BaseForm",
        created() {
            this.getBrandName()
        },
        data() {
            return {
                baseMsg: {
                    name: "",
                    brandId: "",
                    brandName: "",
                    price: "",
                    album: [],
                    description: ""
                },
                brandData: [],
                albumList: [],
                customToolbar: [
                    ['image']
                ]
            }
        },
        methods: {
            getBrandName() {
                get(url.getIdAndName, {}, content => {
                    this.brandData = content
                })
            },
            pre() {
                this.$emit('update:step', 0)
            },
            next() {
                this.baseMsg.brandName = this.$refs['itemSelect'].selectedLabel
                this.$emit('update:step', 2)
                this.$emit('changeProductData', this.baseMsg)
            },
            changeAlbum(album, albumList) {
                this.baseMsg.album = []
                for(const i in albumList) {
                    this.baseMsg.album.push(albumList[i].raw)
                }
            },
            handleImageAdded(file, Editor, cursorLocation, resetUploader) {
                post(url.upload, { file: file }, content => {
                    Editor.insertEmbed(cursorLocation, "image", this.imgPath(content))
                    resetUploader()
                })
                resetUploader()
            },
        }
    }
</script>

<style scoped lang="less">
    .el-button {
        position: fixed;
        bottom: 3%;
        right: 3%;
        z-index: 100;
        width: 200px;
    }
    .el-button:first-of-type {
        position: fixed;
        bottom: 3%;
        left: calc(3% + 200px);
        z-index: 100;
    }
    .el-form {
        padding: 20px 5% 0;
    }
    /deep/ .el-form-item__content {
        white-space: nowrap;
    }
    .description /deep/ .el-form-item__label:last-of-type {
        margin-left: 20px;
        margin-top: 3px;
    }
</style>